<route>{meta: {title: '图片压缩'}}</route>
<template>
  <Page>
    <Condition>
      <el-form inline>
        <el-form-item label="所属专题">
          <el-select v-model="condition.subjectName" clearable>
            <el-option v-for="item in subjectOptions" :key="item" :label="item" :value="item"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <template #toolbar>
        <el-button type="primary" @click="add">新增</el-button>
        <el-button type="primary" @click="download()">批量下载</el-button>
        <el-button type="danger" @click="del">删除</el-button>
      </template>
    </Condition>

    <DataGrid ref="table"
              :data="displayList"
              type="multiple">
      <Column label="图片名称" prop="name"></Column>
      <Column label="所属专题" prop="subjectName"></Column>
      <Column label="图片预览" width="100px">
        <template #default="scope">
          <el-image
            class="img"
            :src="scope.row.url"
            :preview-src-list="imgSrcList"
            :initial-index="scope.row.index"
            :preview-teleported="true"
            fit="cover"
          />
        </template>
      </Column>
      <Column label="处理结果">
        <template #default="scope">
          {{scope.row.sourceSizeDisplay}} ---> {{scope.row.targetSizeDisplay}}{{getLowGrace(scope.row)}}
        </template>
      </Column>
      <Column label="处理日期" prop="createTime" width="170px"></Column>
      <Column label="操作" width="100px">
        <template #default="scope">
          <el-button type="primary" @click="download(scope.row)">下载</el-button>
        </template>
      </Column>
    </DataGrid>
  </Page>
</template>

<script>
/**
 Author: 蒋鑫强
 Time: 2023/5/30
 Description:
 */
import Condition from '@/components/Condition.vue';
import DataGrid from '@/components/DataGrid.vue';
import Column from '@/components/Column.vue';
import Page from '@/components/Page.vue';
import dialog from '@/util/dialog';
import db from '@/util/db';
import imgZip from '@/native/imgZip';
import file from '@/native/file';

export default {
  name: 'imgZip',
  components: {Page, Column, DataGrid, Condition},

  data() {
    return {
      condition: {
        subjectName: ''
      },
      list: []
    };
  },

  computed: {
    imgSrcList() {
      return this.list.map(d => d.url);
    },

    subjectOptions() {
      return this.list.reduce((cur, next) => {
        if (!cur.includes(next.subjectName)) {
          cur.push(next.subjectName);
        }

        return cur;
      }, []);
    },

    displayList() {
      if (this.condition.subjectName) {
        return this.displayList.filter(d => d.subjectName === this.condition.subjectName);
      } else {
        return this.list;
      }
    },
  },

  methods: {
    getLowGrace(row) {
      const dist = row.sourceSize - row.targetSize;
      if (row.sourceSize) {
        return `(-${(dist / row.sourceSize * 100).toFixed(0)}%)`;
      } else {
        return '';
      }
    },

    add() {
      import(/* webpackChunkName: "imgZipDetail" */'@/views/tool/imgZipDetail').then(component => {
        dialog.show(component, {
          list: []
        }, {
          title: '新增图片压缩'
        }).then(() => {
          this.loadData();
        });
      });
    },

    async del() {
      const selections = this.$refs.table.getSelectionRows();
      await db.removeItem('imgZip', selections);
      this.$refs.table.removeData(selections);
      imgZip.removeFile(selections);
    },

    async loadData() {
      this.list = await db.getItem('imgZip') || [];
    },

    download(sections) {
      if (!sections) {
        sections = this.$refs.table.getSelectionRows();
      }

      file.downloadFile(sections);
    }
  },

  created() {
    this.loadData();
  }
}
</script>

<style lang="less" scoped>
.img {
  width: 50px;
  height: 50px;
  display: block;
  cursor: pointer;
}
</style>
